<template>
  <div>
    <baidu-map v-if="isShow"  class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
      <bm-boundary  @click="handleClick" name="仙居县" :strokeWeight="2" strokeColor="blue"></bm-boundary>
      <!--缩放-->
    </baidu-map>
  </div>
</template>

<script>
    import BMap from 'vue-baidu-map'
    export default {
        name: "demo",
        data: () => ({
            isShow:false,
            map: {
                center: {lng: 120.618657 , lat: 28.695439},
                zoom: 11,
                show: true,
                dragging: true
            },
        }),
        mounted () {
            // this.getBoundary(BaiduMap)
            let that_ = this
            setTimeout(function(){
                that_.isShow = true
            },1000)
        },
        methods: {
            handler({BMap, map}) {
                let me = this;
                console.log(BMap, map)
                // 鼠标缩放
                map.enableScrollWheelZoom(true);
                // 点击事件获取经纬度
                map.addEventListener('click', function (e) {
                    console.log(e.point.lng, e.point.lat)
                })
            },
            handleClick(){
              alert(1)
            },
            addlabel(BMap, map) {
                var pointArray = [
                    new BMap.Point(121.716076, 23.703799),
                    new BMap.Point(112.121885, 14.570616),
                    new BMap.Point(123.776573, 25.695422)];
                var optsArray = [{}, {}, {}];
                var labelArray = [];
                var contentArray = [
                    "台湾是中国的！",
                    "南海是中国的！",
                    "钓鱼岛是中国的！"];
                for (var i = 0; i < pointArray.length; i++) {
                    optsArray[i].position = pointArray[i];
                    labelArray[i] = new BMap.Label(contentArray[i], optsArray[i]);
                    labelArray[i].setStyle({
                        color: "red",
                        fontSize: "12px",
                        height: "20px",
                        lineHeight: "20px",
                        fontFamily: "微软雅黑"
                    });
                    map.addOverlay(labelArray[i]);
                }
            },
            getBoundary(BMap, map) {
                var bdary = new BMap.Boundary();
                bdary.get("仙居县", function (rs) {       //获取行政区域
                    map.clearOverlays();        //清除地图覆盖物
                    var count = rs.boundaries.length; //行政区域的点有多少个
                    if (count === 0) {
                        alert('未能获取当前输入行政区域');
                        return;
                    }
                    var pointArray = [];
                    for (var i = 0; i < count; i++) {
                        var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                        map.addOverlay(ply);  //添加覆盖物
                        pointArray = pointArray.concat(ply.getPath());
                    }
                    map.setViewport(pointArray);    //调整视野
                    this.addlabel();
                })
            }
        }
    }
</script>

<style scoped>
  .map {
    width: 100%;
    height: 100vh;
  }
</style>
